<template>
  <view class="wall-container">
    <u-sticky>
      <view style="background: #fff; padding: 10rpx 0;">
        <u-tabs :list="list1" @click="click"></u-tabs>
      </view>
    </u-sticky>
    
    <view class="my-posts-page">
      <!-- 顶部导航 -->
      <!-- 雪花 Canvas 背景 -->
      <canvas canvas-id="snow-canvas" class="snow-canvas"></canvas>
      <!-- 内容列表 - 改为瀑布流布局 -->
      <view  class="waterfall-container" style="b">   
        <view class="post-list waterfall-list">
          <!-- 空状态 -->
          <view v-if="posts.length === 0 && !isLoading" class="empty-state">
            <image src="/static/image/que.png" mode="aspectFit" class="empty-image"></image>
            <text class="empty-text">没有内容~</text>
          </view>
          
          <!-- 内容卡片 - 瀑布流项 -->
          <view v-for="(item, index) in posts" :key="index" class="post-card waterfall-item">
            <!-- 顶部信息 -->
            
            
            <!-- 内容预览 -->
            <view class="content-preview" @click.native.stop="viewDetail(item)">
              
              <!-- 多媒体预览 - 优化瀑布流图片显示 -->
              <view class="media-preview">
                <!-- 图片预览 @click.native.stop="imgClick(item.images)" -->
                <view v-if="item.images && item.images.length > 0" class="image-preview">
                  <image :src="item.images[0]" mode="aspectFill" class="waterfall-image"></image>
                  <text v-if="item.images.length > 1" class="image-count">
                    +{{item.images.length - 1}}
                  </text>
                </view>
                
                <!-- 视频预览 -->
                <view v-else-if="JSON.parse(item.video_url)" class="video-preview">
                  <video :src="JSON.parse(item.video_url)" class="waterfall-video" ></video>
                  <uni-icons type="videocam-filled" size="15" color="#fff" class="video-icon"></uni-icons>
                </view>
              </view>
			  <text class="content-text" style="padding: 0 20rpx;">{{item.content}}</text>
            </view>
			<view style="padding: 20rpx; display: flex;justify-content: space-between;align-items: center;">
			  <view style="display: flex;justify-content: space-between;align-items: center;">
				  <view>
				    <image @click.native.stop="userClick(item)" style="border-radius: 50rpx;width: 50rpx;height: 50rpx;" :src="item.avatar||'/static/default_avatar.jpg'"></image>
				  </view>
				  <view style="margin-right: 15rpx;margin-left: 10rpx; ">
				    <text  style="font-size: 22rpx;color: #555; ">{{item.nickname}}</text>
				  </view>
			  </view>
			  <view style="display: flex;align-items: center;">
			  	<uni-icons :type="item.is_liked==1?'heart-filled':'heart'" @click.native.stop="likecount(item)" size="15" :color="item.is_liked ? '#ff4d6d' : '#999'"></uni-icons>
			  	<text style="font-size: 22rpx; color: #afafaf;">{{item.like_count || 0}}</text>
			  </view>
			</view>

          </view> 
          
          <!-- 加载更多 -->
          <view class="load-more">
            <text v-if="isLoading && !hasMore">加载中...</text>
            <text v-else-if="!hasMore && !isLoading">没有更多了</text>
          </view>
        </view>
      </view>
      
    </view>
    <BottomNav :currentPage="'home'"></BottomNav>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 原有数据保持不变
      currentIndex: 0,
      scrollTop: 0,
      current: 0,
      particles: [],
      list1: [],
      windowWidth: 375,
      windowHeight: 667,
      robotLeft: 0,
      robotTop: 0,
      direction: -1, // -1: 向左, 1: 向右
      stepCount: 0,
      timer: null,
      page: 1,
      size: 20,
      show: false,
      showComment: false,
      commentList: [], // 评论列表
      page: 1, // 当前页码
      pageSize: 20, // 每页数量
      loading: false, // 是否正在加载
      noMore: false, // 是否没有更多数据
      newComment: '', // 新评论内容
      replyingTo: null, // 正在回复的评论
      isFocus: false, // 输入框是否聚焦
      scrollToId: '' ,// 滚动到指定评论
      findId:'',
      labelId:'',
              
      loadingMore:false,
      posts: [],
      refreshing: false,
      noMore: false,
      page: 1,
      pageSize: 10,
                              
      loadingComments: false,
      currentPostId: null,
      currentComments: [],
      newComment: '',
      loadingComments: false,
      refreshingComments: false,
      loadingMoreComments: false,
      noMoreComments: false,
      commentPage: 1,
      commentPageSize: 10,
      scrollTop: 0,
      parent_id:0,
      
      // 优化后的加载状态
      isLoading: false,       // 全局加载状态
      total: 0,               // 总数据量
      hasMore: true,          // 是否还有更多数据
      scrollTimer: null,      // 滚动防抖定时器
      scrollDistance: 300,    // 距离底部多少像素触发加载
    };
  },
  onShow() {
    const savedIndex = uni.getStorageSync('confessionCurrentIndex');
    if (savedIndex !== '' && savedIndex !== undefined) {
      this.currentIndex = savedIndex;
    }
    // 监听页面滚动事件
    uni.onPageScroll((e) => {
      this.handleScroll(e);
    });
    // this.getPagelist()
  },
  computed: {
    canLoadMore() {
      return !this.noMore && !this.loadingMore && !this.refreshing;
    }
    
  },
  onLoad() {
    
  },
  onShow() {
    this.getlist()
    this.loadPosts()
  },
  
  onReady() {
    this.initSnowEffect();
  },
  onUnload() {
    if (this.timer) clearInterval(this.timer);
    // 移除滚动监听
    uni.offPageScroll();
    if (this.scrollTimer) clearTimeout(this.scrollTimer);
  },
  methods: {
	userClick(item){
		uni.navigateTo({
			url:`/pagesA/user?id=${item.user_id}`
		})
	},
    // 原有方法保持不变
    viewcount(item){
      
    },
    async likecount(item){
      item.is_liked==0?1:0
      if(item.is_liked == 0){
        const res = await this.$api.post('/Like/add',{uid:item.user_id, target_id:item.id,target_type:1},true)
        if(res.data.code === 200) {
          item.is_liked = 1
          item.like_count = item.like_count + 1
        }
      } else {
        const res = await this.$api.post('/Like/cancel',{uid:item.user_id,target_id:item.id,target_type:1},true)
        if(res.data.code === 200) {
          item.is_liked = 0
          item.like_count = item.like_count -1
        }
      }
      
    },

    // 模拟雪花特效
    initSnowEffect() {
      const sys = uni.getSystemInfoSync();
      const W = sys.windowWidth;
      const H = sys.windowHeight;
      const ctx = uni.createCanvasContext('snow-canvas', this);
      
      const snowflakes = [];
      for (let i = 0; i < 40; i++) {
        snowflakes.push({
          x: Math.random() * W,
          y: Math.random() * H,
          r: Math.random() * 3 + 1,
          d: Math.random() * 2 + 1
        });
      }
      
      const draw = () => {
        ctx.clearRect(0, 0, W, H);
        ctx.setFillStyle('rgba(255,255,255,0.9)');
        ctx.beginPath();
        snowflakes.forEach(flake => {
          ctx.moveTo(flake.x, flake.y);
          ctx.arc(flake.x, flake.y, flake.r, 0, Math.PI * 2);
        });
        ctx.fill();
        snowflakes.forEach(flake => {
          flake.y += flake.d;
          flake.x += Math.sin(flake.y / 20) * 0.8;
          if (flake.y > H) {
            flake.y = 0;
            flake.x = Math.random() * W;
          }
        });
        ctx.draw();
        // #ifdef H5
        requestAnimationFrame(draw);
        // #endif
        // #ifdef MP-WEIXIN
        setTimeout(draw, 1000 / 60);
        // #endif
      };
      
      draw();
    },
    // 查看评论
      async viewComments(postId) {
          console.log('5435345324',postId)
        this.currentPostId = postId
        this.commentPage = 1
        this.noMoreComments = false
        this.$refs.commentPopup.open()
        this.loadComments()
      },
      
      // 加载评论
      async loadComments() {
        if (this.loadingComments) return
        
        this.loadingComments = true
        try {
           const res = await this.$api.get('Comment/index',{confession_id:this.currentPostId},true)
           if(res.data.code === 200) {
               this.currentComments = res.data.data
               this.loadingComments = false
               this.refreshingComments = false
               this.loadingMoreComments = false 
           }
          
          // 模拟数据
          
        } catch (err) {
          console.error('获取评论失败', err)
          uni.showToast({
            title: '获取评论失败',
            icon: 'none'
          })
          this.loadingComments = false
          this.refreshingComments = false
          this.loadingMoreComments = false
        }
      },
      
      // 刷新评论
      refreshComments() {
        this.refreshingComments = true
        this.commentPage = 1
        this.noMoreComments = false
        this.loadComments()
      },
      
      // 加载更多评论
      loadMoreComments() {
        if (this.noMoreComments || this.loadingMoreComments) return
        this.loadingMoreComments = true
        this.commentPage++
        this.loadComments()
      },
      commentNickname(item){
          console.log('dasad',item)
          this.parent_id = item.id
          this.newComment = '回复'+item.nickname+'：'
      },
      // 发送评论
      async sendComment() {
        if (!this.newComment.trim()) return
        
        try {
          // 模拟添加评论
          const newComment = {
            parent_id: this.parent_id,
            content: this.newComment,
            confession_id:this.currentPostId
          }
          
          const res = await this.$api.post('/Comment/save',newComment,true)
          if(res.data.code === 200) this.loadComments()
          // 滚动到顶部显示最新评论
          this.scrollTop = 0
          // this.currentComments.unshift(newComment)
          
          // 更新帖子评论数
          const postIndex = this.posts.findIndex(p => p.id === this.currentPostId)
          if (postIndex !== -1) {
            this.posts[postIndex].commentCount += 1
          }
          
          this.newComment = ''
          uni.showToast({
            title: '评论成功',
            icon: 'success'
          })
          
          // 实际项目中调用API发送评论
          // await uni.request({
          //   url: '/api/comment/add',
          //   method: 'POST',
          //   data: {
          //     postId: this.currentPostId,
          //     content: newComment.content
          //   }
          // })
        } catch (err) {
          console.error('评论失败', err)
          uni.showToast({
            title: '评论失败',
            icon: 'none'
          })
        }
      },
      
      // 关闭评论弹窗
      closeCommentPopup() {
        this.$refs.commentPopup.close()
        this.newComment = ''
        this.currentComments = []
      },
       
    
    // 格式化评论时间
    formatCommentTime(timestamp) {
      const now = Date.now()
      const diff = now - timestamp
      const minute = 60 * 1000
      const hour = 60 * minute
      const day = 24 * hour
      
      if (diff < minute) return '刚刚'
      if (diff < hour) return `${Math.floor(diff / minute)}分钟前`
      if (diff < day) return `${Math.floor(diff / hour)}小时前`
      return `${Math.floor(diff / day)}天前`
    },
     // 滚动到底部加载更多
    loadMore() {
      if (this.isLoading || !this.hasMore) return;
      this.loadingMore = true;
      this.loadPosts();
    },
    
    // 处理滚动事件（带防抖）
    handleScroll(e) {
      if (this.isLoading || !this.hasMore) return;
      
      const systemInfo = uni.getSystemInfoSync();
      const scrollHeight = e.scrollTop + systemInfo.windowHeight;
      const documentHeight = systemInfo.windowHeight; // 这里需要根据实际情况获取文档总高度
      
      // 距离底部指定距离时触发加载
      if (scrollHeight >= documentHeight - this.scrollDistance) {
        if (this.scrollTimer) clearTimeout(this.scrollTimer);
        
        this.scrollTimer = setTimeout(() => {
          this.loadMore();
        }, 300); // 300ms防抖
      }
    },
    
    // 加载帖子数据
    async loadPosts(refresh = false) {
      // 如果正在加载或没有更多数据，直接返回
      if (this.isLoading || (!refresh && !this.hasMore)) return;
      
      try {
        this.isLoading = true;
        
        // 刷新时重置页码
        if (refresh) {
          this.page = 1;
        }
        
        const res = await this.$api.get('/Confessions/list', {
          page: this.page,
          limit: this.pageSize,
          category_id: this.labelId
        }, true);
        
        console.log('加载数据:', res.data.data);
        
        if (res.data.code === 200) {
          const { list, total } = res.data.data;
          
          // 更新总数据量
          this.total = total;
          
          // 刷新时重置列表，加载更多时拼接数据
          if (refresh) {
            this.posts = list;
          } else {
            this.posts = this.posts.concat(list);
          }
          
          // 计算是否还有更多数据
          this.hasMore = this.posts.length < total;
          
          // 页码递增
          if (this.hasMore) {
            this.page++;
          }
        }
      } catch (error) {
        console.error('数据加载失败:', error);
        uni.showToast({
          title: '加载失败，请重试',
          icon: 'none'
        });
      } finally {
        this.isLoading = false;
        this.refreshing = false;
        this.loadingMore = false;
      }
    },
    
    // 下拉刷新
    onRefresh() {
      this.refreshing = true;
      this.loadPosts(true);
    },
    
    
    
    // 获取分类颜色
    getCategoryColor(category) {
      const colors = {
        '告白': '#ff4d6d',
        '祝福': '#5cdbd3',
        '寻人': '#ff9c6e',
        '吐槽': '#ffc069',
        '其他': '#b37feb'
      }
      return colors[category] || '#69c0ff'
    },
    
    // 查看详情
    async viewDetail(item) {
      item.view_count += 1
      const res = await this.$api.post('/Confessions/reads',{id:item.id},true)
      uni.navigateTo({
        url: `/pages/index/noteDetail?id=${item.id}`,
      })
    },

  
    async getlist() {
      const res = await this.$api.get('/Confessions/category','',true)
      if(res.data.code === 200) {
        this.list1 = res.data.data
        this.list1.unshift({
          id: '',
          name: '全部'
        })
      }
    },
    imgClick(url) {
      uni.previewImage({
        urls:url,
        current: 0 // 当前显示图片的索引
      })
    },
    close() {
      this.show = false
      // console.log('close');
    },
    async getPagelist() {
	  this.page = 1; // 页码递增
      const res = await this.$api.get('/Confessions/list', {
        page: this.page,
        limit: this.size,
        category_id:this.labelId
      },true)
      console.log('------------------', res.data.data)
      if (res.data.code === 200) {
        this.posts = res.data.data.list
        this.loadingMore = false
        this.refreshing = false
        this.loadingComments = false
        this.refreshingComments = false
        this.loadingMoreComments = false
        // 计算是否还有更多数据
        this.noMore = this.posts.length >= res.data.data.total;
      }
    },
    
    startWalking() {
      this.timer = setInterval(() => {
        this.stepCount++;
        // 左右行走
        this.robotLeft += this.direction * 1.5;

        // 到达边界就掉头
        const minLeft = -30; // 左边探出一半
        const maxLeft = this.windowWidth - 30; // 右边探出一半
        if (this.robotLeft <= minLeft || this.robotLeft >= maxLeft) {
          this.direction *= -1;
        }
      }, 30); // 每 30ms 更新一次位置
    },
    
    
    
    click(item) {
      console.log('item', item);
      this.labelId = item.id
      this.current = item.name
      this.getPagelist()
    },
    changeCategory(category) {
      this.currentCategory = category;
      this.currentIndex = 0; // Reset to the first item of the selected category
    },
    
    comment(item) {
      console.log('item',item)
      this.findId = item.id
      this.showComment=true
      this.loadComments()
    },
    // 提交评论
    async submitComment() {
      if (!this.newComment.trim()) return;

      const params = {
        findId:this.findId,
        content:this.newComment,
        type:this.replyingTo?2:1
      }
      if(this.replyingTo){
        params.commentsId = this.replyingTo.id
        // if(this.replyingTo.commentId){
        // 	params.commentsReplyId = this.replyingTo.commentId
        // }
      }
      
      const res = await this.$api.post('/findinfo/comment_or_reply',params)
      console.log('大苏打大',res)
      if(res.data.code === 0) {
        this.loadComments()
        // 添加到列表顶部
        this.replyingTo = null;
        
        // 实际项目中这里应该调用API提交评论
        uni.showToast({
          title: '评论成功',
          icon: 'success'
        });
        // 滚动到新评论位置
        this.$nextTick(() => {
          this.scrollToId = 'comment-' + newComment.id;
        });
      }
      this.newComment = '';
      

      
    },

    // 点赞/取消点赞
    async toggleLike(comment,index) {
      if (comment.isLike) {
        comment.likeNum--;
      } else {
        comment.likeNum++;
      }
      comment.isLike = !comment.isLike;
      const res = await this.$api.post('/findinfo/bookmark_or_like',{findId:comment.id,type:index})
      if(res.data.code === 0) {
        
      }
      // 实际项目中这里应该调用API更新点赞状态
    },
    async toggisCollect(comment,index){
      if (comment.isCollect) {
        comment.collectNum--;
      } else {
        comment.collectNum++;
      }
      comment.isCollect = !comment.isCollect;
      const res = await this.$api.post('/findinfo/bookmark_or_like',{findId:comment.id,type:index})
      if(res.data.code === 0) {
        
      }
    },

    // 模拟获取评论数据
    async getMockComments(page, pageSize) {
      const mockComments = [];
      const startIndex = (page - 1) * pageSize;
      
      const res = await this.$api.get(`/findinfo/getCommentList/${this.findId}`,'',true)
      console.log(',ree',res)
      if(res.data.code === 0) {
        this.commentList = res.data.data.records
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.snow-canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
}
/* 评论弹窗样式 */
.comment-popup {
  background-color: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding-bottom: env(safe-area-inset-bottom);
  height: 70vh;
  display: flex;
  flex-direction: column;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
    
    .popup-title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }
  }
  
  .comment-list {
    flex: 1;
    height: 0; /* 关键样式，确保滚动 */
    .loading-more, .no-more, .empty-comments {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 15px 0;
      color: #999;
      font-size: 14px;
      
      .loading-icon {
        margin-right: 8px;
        animation: rotating 1s linear infinite;
      }
    }
    
    .comment-item {
      display: flex;
      padding: 12px 0;
      border-bottom: 1px solid #f5f5f5;
      
      .comment-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 12px;
        flex-shrink: 0;
      }
      
      .comment-content {
        flex: 1;
        min-width: 0;
        
        .comment-user {
          display: flex;
          align-items: center;
          margin-bottom: 4px;
          
          .username {
            font-size: 15px;
            font-weight: bold;
            color: #333;
            margin-right: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          
          .time {
            font-size: 12px;
            color: #999;
            flex-shrink: 0;
          }
        }
        
        .comment-text {
          font-size: 14px;
          color: #333;
          line-height: 1.5;
          word-break: break-word;
        }
      }
    }
  }
  
  .comment-input-area {
    display: flex;
    padding: 12px 16px;
    border-top: 1px solid #f0f0f0;
    background-color: #fff;
    flex-shrink: 0;
	background: #fff;
	z-index: 100;
    
    .comment-input {
      flex: 1;
      height: 36px;
      padding: 0 12px;
      background-color: #f5f5f5;
      border-radius: 18px;
      font-size: 14px;
      margin-right: 10px;
    }
    
    .send-btn {
      height: 36px;
      line-height: 36px;
      padding: 0 16px;
      background-color: #74b9ff;
      color: #fff;
      border-radius: 18px;
      font-size: 14px;
      border: none;
      &::after {
        border: none;
      }
      
      &[disabled] {
        background-color: #ccc;
      }
    }
  }
}

@keyframes rotating {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


.my-posts-page {
  min-height: 100vh;
  background: linear-gradient(to right, #c3f0f7, #fff7d6);

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;

    .title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }
  }

  /* 瀑布流容器样式 */
  .waterfall-container {
    overflow-y: auto;
    padding: 0 15rpx;
  }
  .post-list{
	  padding: 0 15rpx;
  }
  .waterfall-list {
	margin-top: 15rpx;
    column-count: 2; /* 两列瀑布流 */
    column-gap: 10rpx; /* 列间距 */
    page-break-inside: avoid;
    -webkit-column-count: 2;
    -webkit-column-gap: 15rpx;
    -moz-column-count: 2;
    -moz-column-gap: 10rpx;
  }
  
  .waterfall-item {
    break-inside: avoid;
    -webkit-break-inside: avoid;
    -moz-break-inside: avoid;
    margin-bottom: 10rpx; /* 每项底部间距 */
  }
  
  .post-card {
    margin-bottom: 10rpx; /* 卡片底部间距 */
    // padding: 15px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    break-inside: avoid;
    -webkit-break-inside: avoid;
    -moz-break-inside: avoid;
    
    .card-header {
      display: flex;
	  padding: 20rpx;
      align-items: center;
      font-size: 29rpx;
      .category {
        font-weight: bold;
        margin-right: 10px;
      }

      .time {
        color: #999;
        margin-right: 10px;
      }

      .status {
        padding: 2px 6px;
        background-color: #fffbe6;
        color: #faad14;
        border-radius: 4px;
        font-size: 11px;
      }
    }
.content-text {
        font-size: 25rpx;
        line-height: 1.6;
        color: #333;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 限制为2行 */
        overflow: hidden;
      }
    .content-preview {
      .media-preview {
        .image-preview {
          position: relative;
          border-radius: 8px;
          overflow: hidden;
          margin-bottom: 15rpx;
		  
          .waterfall-image {
            width: 100%;
			max-height: 280rpx;
            // height: auto;
            border-radius:   15rpx 15rpx 0 0;
          }

          .image-count {
            position: absolute;
            right: 8px;
            bottom: 8px;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 10px;
          }
        }

        .video-preview {
          position: relative;
          height: 300rpx;
          border-radius: 8px 8px 0 0;
          overflow: hidden;
		  margin-bottom: 15rpx;
          .waterfall-video {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .video-icon {
            position: absolute;
            left: 8px;
            bottom: 8px;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 4px;
            border-radius: 50%;
          }
        }
      }
    }

    .interaction-data {
      display: flex;
	  padding: 20rpx;
      align-items: center;
      justify-content: space-between;

      .data-item {
        display: flex;
        align-items: center;
        margin-right: 15px;
        color: #666;
        font-size: 13px;

        text {
          margin-left: 4px;
        }
      }

      .action-btns {
        flex: 1;
        display: flex;
        justify-content: flex-end;

        .action-btn {
          height: 28px;
          line-height: 28px;
          padding: 0 12px;
          font-size: 12px;
          border-radius: 14px;
          margin-left: 8px;
          border: none;

          &::after {
            border: none;
          }
        }

        .delete-btn {
          background-color: #fff2f0;
          color: #ff4d4f;
        }

        .share-btn {
          background-color: #f0f7ff;
          color: #1890ff;
        }
      }
    }
  }

  .load-more {
    text-align: center;
    padding: 15px;
    color: #999;
    font-size: 14px;
    column-span: all;
    -webkit-column-span: all;
    -moz-column-span: all;
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;
    column-span: all;
    -webkit-column-span: all;
    -moz-column-span: all;

    .empty-image {
      width: 200px;
      height: 200px;
      opacity: 0.6;
      margin-bottom: 20px;
    }

    .empty-text {
      font-size: 16px;
      color: #999;
      margin-bottom: 30px;
    }

    .publish-btn {
      width: 200px;
      height: 40px;
      line-height: 40px;
      background: linear-gradient(90deg, #a18cd1, #fbc2eb);
      color: #fff;
      border-radius: 20px;
      font-size: 16px;
      border: none;

      &::after {
        border: none;
      }
    }
  }
}
</style>